<template>
  <div id="m2">
    <!-- 顶部/立即选购 -->
    <div class="box_top">
      <div class="top1">
        <div class="top">
          <div class="left">
            <a href="">MacBook Air</a>
          </div>
          <div class="right">
            <a href="">概览</a>
            <a href="">macOS</a>
            <a href="">规格比较</a>
          </div>
        </div>
      </div>

      <div class="choose">
        <div class="text1">
          <div class="text">
            <span
              >为高校生活购买 Mac 或 iPad,以教育优惠节省更多,另有 AirPods
              搭配其中&nbsp;</span
            >
            <a href="">立即选购></a>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品详情 -->
    <div class="details" v-if="data">
      <div class="left">
        <ul>
          <li>
            <img :src="data.img" alt="" />
          </li>
          <li>
            <!-- <router-link to="/">查看图库</router-link> -->
            <b>MacBookAir-M2</b>
          </li>
          <li>
            <div class="pic">
              <svg
                viewBox="0 0 35 35"
                class="
                  as-svgicon
                  as-svgicon-shipping
                  as-svgicon-base
                  as-svgicon-shippingbase
                "
                role="img"
                aria-hidden="true"
                width="35px"
                height="35px"
              >
                <path fill="none" d="M0 0h35v35H0z"></path>
                <path
                  d="M27.687 10.547l-9-4.852a2.5 2.5 0 00-2.373 0l-9 4.852A2.5 2.5 0 006 12.748v9.471a2.494 2.494 0 001.313 2.2l9 4.852a2.5 2.5 0 002.373 0l9-4.852a2.5 2.5 0 001.314-2.2v-9.471a2.5 2.5 0 00-1.313-2.201zm-10.9-3.971a1.5 1.5 0 011.424 0l9 4.852c.041.022.072.055.11.081l-4.41 2.507-9.628-5.55zm-4.538 2.446l9.651 5.566-4.4 2.5-9.823-5.58c.038-.026.07-.059.111-.081zM7.788 23.539A1.5 1.5 0 017 22.219v-9.471a1.494 1.494 0 01.069-.436L17 17.957v10.516a1.494 1.494 0 01-.212-.082zM28 22.219a1.5 1.5 0 01-.788 1.32l-9 4.851a1.481 1.481 0 01-.212.082V17.957l9.931-5.646a1.5 1.5 0 01.069.436z"
                ></path>
              </svg>
              <p>免费送货</p>
            </div>
            <div class="pic">
              <svg
                viewBox="0 0 35 35"
                class="
                  as-svgicon
                  as-svgicon-return
                  as-svgicon-base
                  as-svgicon-returnbase
                "
                role="img"
                aria-hidden="true"
                width="35px"
                height="35px"
              >
                <path fill="none" d="M0 0h35v35H0z"></path>
                <path
                  d="M12.249 9.022l-4.461 2.4c-.041.022-.073.055-.111.081l9.823 5.588 4.4-2.5zM27.322 11.507c-.038-.025-.069-.058-.11-.081l-9-4.852a1.5 1.5 0 00-1.424 0l-3.5 1.889 9.628 5.55zM10.8 18.5a.5.5 0 01-.5.5H7v3.219a1.5 1.5 0 00.788 1.32l9 4.852a1.494 1.494 0 00.212.082V17.957l-9.931-5.645a1.494 1.494 0 00-.069.436V18h3.3a.5.5 0 01.5.5zM18 17.957v10.515a1.481 1.481 0 00.212-.082l9-4.851a1.5 1.5 0 00.788-1.32v-9.471a1.5 1.5 0 00-.069-.436z"
                  fill="none"
                ></path>
                <path
                  d="M27.687 10.547l-9-4.852a2.5 2.5 0 00-2.373 0l-9 4.852A2.5 2.5 0 006 12.748V17h1v-4.252a1.494 1.494 0 01.069-.436L17 17.957v10.516a1.494 1.494 0 01-.212-.082l-9-4.852A1.5 1.5 0 017 22.219V20H6v2.219a2.494 2.494 0 001.313 2.2l9 4.852a2.5 2.5 0 002.373 0l9-4.852a2.5 2.5 0 001.314-2.2v-9.471a2.5 2.5 0 00-1.313-2.201zm-10.9-3.971a1.5 1.5 0 011.424 0l9 4.852c.041.022.072.055.11.081l-4.41 2.507-9.628-5.55zm-9.11 4.932c.038-.026.07-.059.111-.081l4.461-2.4 9.651 5.561-4.4 2.5zM28 22.219a1.5 1.5 0 01-.788 1.32l-9 4.851a1.481 1.481 0 01-.212.082V17.957l9.931-5.646a1.5 1.5 0 01.069.436z"
                ></path>
                <path
                  d="M2.507 18l1.646-1.646a.5.5 0 00-.707-.707l-2.5 2.5a.5.5 0 000 .707l2.5 2.5a.5.5 0 10.707-.707L2.507 19H6v-1zM10.3 19a.5.5 0 000-1H7v1zM6 18h1v1H6z"
                ></path>
              </svg>
              <p>简单免费的退货服务</p>
            </div>
          </li>
          <li>
            <p>有 Mac 购买方面的疑问？</p>
            <a href="">与 Mac Specialist 专家在线交流。</a>
          </li>
        </ul>
      </div>
      <div class="right">
        <h5>新款</h5>
        <h3>{{ data.title }}</h3>
        <div class="text">
          <p>
            Apple M2 芯片 (8 核中央处理器、8 核图形处理器和 16 核神经网络引擎)
          </p>
          <p>8GB 统一内存</p>
          <p>256GB 固态硬盘</p>
          <p>13 英寸视网膜显示屏，支持原彩显示</p>
          <p>1080p FaceTime 高清摄像头</p>
          <p>MagSafe 3 充电端口</p>
          <p>两个雷雳 / USB 4 端口</p>
          <p>30W USB‑C 电源适配器</p>
          <p>带有触控 ID 的背光妙控键盘 - 中文 (拼音)</p>
          <p>【标准配置】</p>
          <p>每位顾客限购 2 台配备 M2 芯片的 MacBook Air。</p>
        </div>
        <div class="equipment">
          <h4>添加折抵设备</h4>
          <p>
            用你符合条件的电脑来换购新
            Mac,可享受折抵优惠。我们也可以免费将其回收处理*。
          </p>
          <a href="">立即开始</a>
        </div>
        <!-- 内存  now-->
        <div class="d1">
          <h4>内存</h4>
          <a href="">多大的内存适合你？</a>
          <div
            @click="now = index"
            :class="{ active: now == index }"
            class="dd1"
            v-for="(item, index) in data.neicun"
            :key="item.id"
          >
            <span>{{ item.neicun_gg }}</span>
            <span>{{ item.neicun_price }}</span>
          </div>
        </div>
        <!-- Soc芯片 now1-->
        <div class="d1">
          <h4>SoC 芯片 (处理器)</h4>
          <a href="">哪款芯片适合你? SoC 芯片 (处理器)</a>
          <div
            class="dd1"
            @click="now1 = index"
            :class="{ active: now1 == index }"
            v-for="(item, index) in data.SoC"
            :key="item.id"
          >
            <span>{{ item.SoC_gg }}</span>
            <span>{{ item.SoC_price }}</span>
          </div>
        </div>
        <!-- 存储设备 now2-->
        <div class="d1">
          <h4>存储设备</h4>
          <a href="">多大的存储容量适合你？</a>
          <div
            @click="now2 = index"
            :class="{ active: now2 == index }"
            class="dd1"
            v-for="(item, index) in data.ccsb"
            :key="item.id"
          >
            <span>{{ item.ccsb_gg }}</span>
            <span>{{ item.ccsb_price }}</span>
          </div>
        </div>
        <!-- 电源适配器 now3-->
        <div class="d1">
          <h4>电源适配器</h4>
          <a href="">哪款电源适配器适合你？</a>
          <div
            @click="now3 = index"
            :class="{ active: now3 == index }"
            class="dd1"
            v-for="(item, index) in data.spq"
            :key="item.id"
          >
            <span>{{ item.spq_gg }}</span>
            <span>{{ item.spq_price }}</span>
          </div>
          <p>
            选择 M2 芯片 (10 核图形处理器) 和 512GB
            固态硬盘或更高配置，随附的电源适配器将免费升级至 35W 双 USB‑C
            端口小型电源适配器或 67W USB‑C 电源适配器。
          </p>
        </div>
        <!-- 键盘语言 -->
        <div class="d1">
          <h4>键盘语言</h4>
          <a href="">进一步了解</a>
          <div class="dd3">
            <select>
              <option value="">带有触控 ID 的背光妙控键盘 - 中文 (拼音)</option>
              <option value="">带有触控 ID 的背光妙控键盘 - 美式英语</option>
              <option value="">
                带有触控 ID 的背光妙控键盘 - 繁体中文 (注音)
              </option>
              <option value="">带有触控 ID 的背光妙控键盘 - 日语</option>
              <option value="">带有触控 ID 的背光妙控键盘 - 韩语</option>
              <option value="">带有触控 ID 的背光妙控键盘 - 英式英语</option>
              <option value="">带有触控 ID 的背光妙控键盘 - 法语</option>
              <option value="">带有触控 ID 的背光妙控键盘 - 德语</option>
            </select>
          </div>
        </div>
        <!-- Final now4-->
        <h2>预装软件</h2>
        <div class="d1">
          <h4>Final Cut Pro</h4>
          <a href="">进一步了解</a>
          <div class="dd4">
            <div
              :class="{ active: now4 == 1 }"
              @click="clickFinal(1)"
              class="dd5"
            >
              {{ data.Final.final_gg }}
            </div>
            <div
              :class="{ active: now4 == 2 }"
              @click="clickFinal(2)"
              class="dd6"
            >
              <p>{{ data.Final.final_name }}</p>
              <p>+ RMB {{ data.Final.final_price }}</p>
            </div>
          </div>
        </div>
        <!-- Logic Pro now5-->
        <div class="d1">
          <h4>Logic Pro</h4>
          <a href="">进一步了解</a>
          <div class="dd4">
            <div
              class="dd5"
              :class="{ active: now5 == 1 }"
              @click="clickLogic(1)"
            >
              {{ data.Logic.Logic_gg }}
            </div>
            <div
              class="dd6"
              :class="{ active: now5 == 2 }"
              @click="clickLogic(2)"
            >
              <p>{{ data.Logic.Logic_name }}</p>
              <p>+ RMB {{ data.Logic.Logic_price }}</p>
            </div>
          </div>
        </div>
        <div class="d7">
          <div class="d7_left">
            <h4>还拿不定主意？</h4>
            <p>将此商品收藏到清单，方便回头再来挑选。</p>
          </div>
          <div class="d7_right">
            <svg
              width="35"
              height="35"
              class="
                as-svgicon
                as-svgicon-bookmark
                as-svgicon-base
                as-svgicon-bookmarkbase
              "
              role="img"
              aria-hidden="true"
            >
              <path fill="none" d="M0 0h35v35H0z"></path>
              <path
                d="M21.952 6.433a2.157 2.157 0 011.567.481A2.228 2.228 0 0124 8.516v19.866a.709.709 0 01-.018.178.7.7 0 01-.058-.013 8.985 8.985 0 01-.757-.674l-4.866-4.901a1.111 1.111 0 00-1.602 0l-4.857 4.891a7.25 7.25 0 01-.754.676.145.145 0 01-.053.028h-.015a.681.681 0 01-.02-.185V8.516a2.228 2.228 0 01.48-1.602 2.158 2.158 0 011.568-.48h8.904m0-1h-8.904a3.077 3.077 0 00-2.278.776A3.144 3.144 0 0010 8.516v19.866a1.276 1.276 0 00.276.868.956.956 0 00.76.317 1.073 1.073 0 00.632-.213 8.377 8.377 0 00.874-.776l4.866-4.9a.115.115 0 01.184 0l4.866 4.9a10.454 10.454 0 00.868.77 1.048 1.048 0 00.639.219.956.956 0 00.76-.317 1.276 1.276 0 00.275-.868V8.516a3.144 3.144 0 00-.77-2.306 3.077 3.077 0 00-2.278-.776z"
              ></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
    <!-- 送货 取货 添加购物车 -->
    <div class="box_bottom">
      <div class="box_main">
        <div class="left">
          <svg
            width="25"
            height="25"
            class="
              as-svgicon
              as-svgicon-boxtruck
              as-svgicon-reduced
              as-svgicon-boxtruckreduced
            "
            role="img"
            aria-hidden="true"
          >
            <path fill="none" d="M0 0h25v25H0z"></path>
            <path
              d="M23.482 12.847l-2.92-3.209A1.947 1.947 0 0018.985 9H17V6.495a2.5 2.5 0 00-2.5-2.5h-11a2.5 2.5 0 00-2.5 2.5v9.75a2.5 2.5 0 002.5 2.5h.548A2.746 2.746 0 006.75 21.02 2.618 2.618 0 009.422 19h6.681a2.744 2.744 0 005.347-.23h.735A1.656 1.656 0 0024 16.98v-2.808a1.937 1.937 0 00-.518-1.325zM8.426 18.745a1.74 1.74 0 01-3.352 0 1.577 1.577 0 01.015-1 1.738 1.738 0 013.322 0 1.578 1.578 0 01.015 1zM9.447 18a2.726 2.726 0 00-5.394-.255H3.5a1.502 1.502 0 01-1.5-1.5v-9.75a1.502 1.502 0 011.5-1.5h11a1.502 1.502 0 011.5 1.5V18zm10.972.77a1.738 1.738 0 01-3.337 0 1.573 1.573 0 010-1 1.742 1.742 0 113.337 1zM23 16.98c0 .569-.229.79-.815.79h-.735A2.73 2.73 0 0017 16.165V10h1.986a.976.976 0 01.838.314l2.927 3.214a.95.95 0 01.249.644zm-1.324-3.36a.512.512 0 01.174.38h-3.306a.499.499 0 01-.544-.528V11h1.073a.76.76 0 01.594.268z"
              fill="#1d1d1f"
            ></path>
          </svg>
          <ul>
            <li><h4>预计送达日期:</h4></li>
            <li>有现货</li>
            <li>免费送货</li>
            <li>
              <a href="">查看送货日期</a>
            </li>
          </ul>
        </div>
        <div class="center">
          <svg
            viewBox="0 0 25 25"
            class="
              as-svgicon
              as-svgicon-applestorepickup
              as-svgicon-reduced
              as-svgicon-applestorepickupreduced
            "
            role="img"
            aria-hidden="true"
            width="25px"
            height="25px"
          >
            <path fill="none" d="M0 0h25v25H0z"></path>
            <path
              d="M18.5 5h-1.775a4.231 4.231 0 00-8.45 0H6.5A2.5 2.5 0 004 7.5v11A2.5 2.5 0 006.5 21h12a2.5 2.5 0 002.5-2.5v-11A2.5 2.5 0 0018.5 5zm-6-3a3.245 3.245 0 013.225 3h-6.45A3.245 3.245 0 0112.5 2zM20 18.5a1.5 1.5 0 01-1.5 1.5h-12A1.5 1.5 0 015 18.5v-11A1.5 1.5 0 016.5 6h12A1.5 1.5 0 0120 7.5z"
            ></path>
            <path
              d="M14.4 12.448a1.592 1.592 0 01.738-1.328 1.607 1.607 0 00-1.37-.687c-.52 0-.941.317-1.22.317s-.663-.3-1.129-.3a1.861 1.861 0 00-1.739 2.068 4.32 4.32 0 00.723 2.3c.346.491.648.883 1.084.883s.617-.287 1.144-.287c.55 0 .663.279 1.137.279s.791-.43 1.084-.853a3.24 3.24 0 00.474-.989 1.516 1.516 0 01-.926-1.403zM12.583 10.357a1.346 1.346 0 00.941-.5 1.594 1.594 0 00.361-.974.731.731 0 00-.008-.136 1.5 1.5 0 00-1.016.528 1.547 1.547 0 00-.384.943c0 .053.008.106.008.128.03.004.06.011.098.011z"
            ></path>
          </svg>
          <ul>
            <li><h4>取货：</h4></li>
            <li><a href="">查看供货情况</a></li>
          </ul>
        </div>
        <div class="right" v-if="data">
          <ul>
            <li>
              <h3>RMB {{ (macM2.price / 24).toFixed(2) }}/月 (24 期)或</h3>
            </li>
            <li>
              <h3>RMB {{ priceAll() }}</h3>
            </li>
            <li>含增值税及其他法定税费：约 RMB 931</li>
            <li><a href="">可享免息分期付款</a></li>
          </ul>
          <button @click="addToShopBag"><b>添加到购物袋</b></button>
          <svg
            width="35"
            height="35"
            class="
              as-svgicon
              as-svgicon-bookmark
              as-svgicon-base
              as-svgicon-bookmarkbase
            "
            role="img"
            aria-hidden="true"
          >
            <path fill="none" d="M0 0h35v35H0z"></path>
            <path
              d="M21.952 6.433a2.157 2.157 0 011.567.481A2.228 2.228 0 0124 8.516v19.866a.709.709 0 01-.018.178.7.7 0 01-.058-.013 8.985 8.985 0 01-.757-.674l-4.866-4.901a1.111 1.111 0 00-1.602 0l-4.857 4.891a7.25 7.25 0 01-.754.676.145.145 0 01-.053.028h-.015a.681.681 0 01-.02-.185V8.516a2.228 2.228 0 01.48-1.602 2.158 2.158 0 011.568-.48h8.904m0-1h-8.904a3.077 3.077 0 00-2.278.776A3.144 3.144 0 0010 8.516v19.866a1.276 1.276 0 00.276.868.956.956 0 00.76.317 1.073 1.073 0 00.632-.213 8.377 8.377 0 00.874-.776l4.866-4.9a.115.115 0 01.184 0l4.866 4.9a10.454 10.454 0 00.868.77 1.048 1.048 0 00.639.219.956.956 0 00.76-.317 1.276 1.276 0 00.275-.868V8.516a3.144 3.144 0 00-.77-2.306 3.077 3.077 0 00-2.278-.776z"
            ></path>
          </svg>
        </div>
      </div>
    </div>
    <msg-mask ref="msgMaskbtn" />
  </div>
</template>

<script>
import MsgMask from "@/components/MsgMask.vue";
export default {
  components: { MsgMask },
  data() {
    return {
      data: null,
      now: 0, //内存
      now1: 0, //芯片
      now2: 0, //存储设备
      now3: 0, //适配器
      now4: 1, //Final
      now5: 1, //Logic
      priceArr: [
        { neicunP: 0 },
        { cunchuP: 0 },
        { finalP: 0 },
        { logicP: 0 }
      ],
      macM2: {
        title: "MacAir M2",
        price: 0,
        img: "https://apple1234.obs.cn-north-4.myhuaweicloud.com/slf_toListImg_M2.png",
        num: 1,
      },
      productData: null,
      userBagData: null,
    };
  },

  mounted() {
    this.getData();
  },

  methods: {
    getData() {
      var url = "http://localhost:3000/product/6";
      axios.get(url).then((res) => {
        console.log(res);
        this.data = res.data;
        this.productData = res.data;
        console.log(res.data);
      });
    },
    clickFinal(i) {
      if (i == 1) {
        this.now4 = 1;
        
      } else if (i == 2) {
        this.now4 = 2;
        
      }
    },
    clickLogic(i) {
      if (i == 1) {
        this.now5 = 1;
        
      } else if (i == 2) {
        this.now5 = 2;
        
      }
      this.clickMe();
    },
    clickMe() {
      this.priceArr[0] = this.data.neicun[this.now].price; //内存价格
      this.priceArr[1] = this.data.ccsb[this.now2].price; //存储设备价格
      this.priceArr[2] = 0; //Final价格
      this.priceArr[3] = 0; //Logic价格

      if (this.now4 == 1) {
        this.priceArr[2] = 0;
      } else if (this.now4 == 2) {
        this.priceArr[2] = this.data.Final.final_price;
      }

      if (this.now5 == 1) {
        this.priceArr[3] = 0;
      } else if (this.now5 == 2) {
        this.priceArr[3] = this.data.Logic.Logic_price;
      }
      this.macM2.price =
        this.priceArr[0] +
        this.priceArr[1] +
        this.priceArr[2] +
        this.priceArr[3] ;
    },
    priceAll() {
      this.clickMe();
      let sum = this.priceArr.reduce((p, n) => {
        return p + n;
      });
      console.log(sum);
      this.macM2.price = sum;
      return sum;
    },
    addToShopBag() {
      let user = sessionStorage.getItem("user");
      //判断是否选择了商品
      //自己判断， 是否选择了内存选项
      // 是否选择了存储设备
      // 是否选择了预装软件
      /* if (this.now < 0) {
                return;
            } */
      // 判断是否登录过，否则就直接返回到登录页面
      if (user == "" || !user) {
        this.$refs.msgMaskbtn.setInformation({
          title: "未登录",
          // btnTitle:'去登陆',
          callback() {
            this.$router.push("/login");
          },
        });
        this.$refs.msgMaskbtn.showbtnMask();
        return;
      }

      //解析json字符串为js对象
      user = JSON.parse(user);

      //用户信息已经拿到了,接下来是拿到用户购物袋的信息
      let userurl = `http://localhost:3000/shopBagList?userId=${user.id}`;
      axios.get(userurl).then((res) => {
        this.userBagData = res.data;
        this.macM2.title =
          this.macM2.title + ' ' +
          this.data.neicun[this.now].title + ' ' +
          this.data.ccsb[this.now2].title;
        //检查是否有同名商品
        let seemProduct = this.checkProductNum(this.macM2.title);

        //商品在数据库里的数量如果不等于空
        //就代表着有重复着的数据
        if (seemProduct != null) {
          let url2 = `http://localhost:3000/shopBagList/${seemProduct.id}`;
          seemProduct.num += 1;
          // seemProduct 是重复的商品对象，也就是说其实数据不用更改，直接将之前的数据重写就好了
          // 另外需要将对象里的num数量+1
          axios.put(url2, seemProduct).then((res) => {
            this.macM2.title = "MacAir M2";
            this.$refs.msgMaskbtn.setInformation({
              title: "添加商品成功",
            });
            this.$refs.msgMaskbtn.showbtnMask();
          });
        } else {
          //这里是没找到重复商品的操作
          //正常的添加操作 post
          let url = `http://localhost:3000/user/${user.id}/shopBagList`;
          axios.post(url, this.macM2).then((res) => {
            this.macM2.title = "MacAir M2";
            this.$refs.msgMaskbtn.setInformation({
              title: "添加商品成功",
            });
            this.$refs.msgMaskbtn.showbtnMask();
          });
        }
      });
    },
    checkProductNum(proTitle) {
      //检查用户列表下的商品数量
      //返回值 重复的商品对象
      //参数，需要进行检查的商品标题
      for (const e of this.userBagData) {
        if (e.title == proTitle) {
          return e;
        }
      }
      return null;
    },
  },
};
</script>

<style  scoped src="../assets/css/macbookAir-M1.css">
</style>